<template>
    <div id="page-my-invoice-detail">
        <div class="page-title">
            位置：我的发票
        </div>
        <div class="invoice-info">
            <table>
                <thead>
                    <tr>
                        <td colspan="2">
                            <span class="table-value">发票号：{{invoiceInfo.invoiceId}}，发票总额</span> <span class="high-light">￥{{(invoiceInfo.invoiceMoney/100).toFixed(2)}}</span>
                        </td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            发票状态：
                            <span class="high-light">
                                {{
                                    invoiceInfo.invoiceMakeOutStatus==0?'开票中':
                                    invoiceInfo.invoiceMakeOutStatus==1?'已开':
                                    invoiceInfo.invoiceMakeOutStatus==2?'完成':
                                    invoiceInfo.invoiceMakeOutStatus==3?'重开':
                                    invoiceInfo.invoiceMakeOutStatus==4?'已废弃':
                                    invoiceInfo.invoiceMakeOutStatus==5?'未支付':
                                    invoiceInfo.invoiceMakeOutStatus==59?'退票中':
                                    invoiceInfo.invoiceMakeOutStatus==10?'已退票':
                                    '未知'
                            }}
                            </span>
                        </td>
                        <td>
                            申请时间：<span class="table-value">{{invoiceInfo.invoiceCreateTime}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td>

                            发票抬头：<span class="table-value">{{invoiceInfo.invoiceTitle}}</span>
                        </td>
                        <td>

                            纳税人识别码：<span class="table-value">{{invoiceInfo.invoiceDutyParagraph}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            收件人：<span class="table-value">{{invoiceInfo.invoiceRecipients}}</span>
                        </td>
                        <td>

                            收件地址：<span class="table-value">{{invoiceInfo.invoiceDetailedAddress}}</span>
                        </td>
                    </tr>
                    <tr>
                        <!-- <td>
                            联系电话：<span class="table-value">{{`${invoiceInfo.invoicePhone.substr(0,3)}****${invoiceInfo.invoicePhone.substr(7,4)}`}}</span>
                        </td> -->
                        <td>
                            联系电话：<span class="table-value"  v-if="invoiceInfo.invoicePhone">{{`${invoiceInfo.invoicePhone.substr(0,3)}****${invoiceInfo.invoicePhone.substr(7,4)}`}}</span>
                        </td>
                        <td v-if="invoiceInfo.expressCompany||invoiceInfo.expressNumber">
                            物流信息：
                            <span class="table-value">{{invoiceInfo.expressCompany}} {{invoiceInfo.expressNumber}}</span>
                        </td>
                        <td v-else></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
    export default {
        // name: "invoiceDetail",
        data(){
            return {
                invoiceId:'',
                invoiceInfo:{}
            }
        },
        mounted() {
            this.invoiceId = this.$route.query.id;
            this.$request.myInvoiceDetail({
                id:this.$route.query.id
            }).then(res=>{
                console.log(res);
                if(res.status==200){
                    this.invoiceInfo = res.data;
                }else {
                    this.requestError(res.status,res.message);
                }
            },err=>{
                console.log(err);
                this.requestFail(err);
            })
        }
    }
</script>

<style lang="less" scoped>
    #page-my-invoice-detail{
        @moudle-bg-color:#ffffff;
        @under-line:1px solid #F5F5FB;
        font-family:'Microsoft YaHei','微软雅黑';
        .color(#090909);
        .fz(16px);

        .invoice-info{
            background-color: @moudle-bg-color;
            margin-top: 10px;
            padding: 20px;
            table{
                .width(100%);
                table-layout:fixed;
                .color(#67717D);
                .lh(47px);
                .fz(16px);
                text-align: left;
                .color(#A9A9A9);
                /*border: 1px solid #E4E4E4;*/

                thead{
                    .width(100%);
                    background-color: #F7F7F7;
                    font-weight: bold;
                }
                tbody{
                }
                tr{
                    /*border-top: 1px solid #E4E4E4;*/
                    td{
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        padding: 0 20px;
                        border: 1px solid #E4E4E4;

                        .table-value{
                            .color(#68717C);
                        }
                    }
                }
            }
        }
    }
</style>